<template>
  <el-collapse v-model="showCollapse">
    <el-collapse-item name="1">
      <template #title>
        <div class="card-title">
          Associated gene position
        </div>
      </template>
      <div>
        <el-row justify="space-around">
          <el-col :span="23">
          </el-col>
          <div class="center">
            <Chart3 :snv-list="snvList"></Chart3>
          </div>
        </el-row>
      </div>
    </el-collapse-item>
    <el-collapse-item name="2">
      <template #title>
        <div class="card-title">
          Proximal regulation
        </div>
      </template>
      <div>
        <el-row justify="space-around">
          <el-col :span="23">
            <Table_two_zhan
                style="margin-top: 10px"
                @tableAllData="ProximalData"
                @snvListChange="handleSnvListChange"
                :column="Proximal.column"
                :search-key="'Proximal'"
                :api-key="form"></Table_two_zhan>
          </el-col>
        </el-row>
      </div>
    </el-collapse-item>
    <el-collapse-item name="3">
      <template #title>
        <div class="card-title">
          Distal regulation
        </div>
      </template>
      <div>
        <el-row justify="space-around">
          <el-col :span="23">
            <Table_two_zhan
                style="margin-top: 10px"
                @tableAllData ="DistalData"
                :column="Distal.column"
                :search-key="'Distal'"
                :api-key="form"></Table_two_zhan>
          </el-col>
        </el-row>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import {reactive, toRefs} from "@vue/reactivity";
import {Table_two_zhan} from "@/components/table/index";
import Chart3 from "@/components/chart/chart3.vue"
import {useRoute} from "vue-router";

export default {
  name: "analysis_chromatin_interaction_detail",
  components:{Table_two_zhan,Chart3},
  data(){
    return {
      position: [],
      gene:[],
      snvList: ""
    }
  },
  methods:{
    ProximalData(data){
      data.forEach(item=>{
        if (!this.gene.includes(item.gene)) {
          this.gene.push(item.gene)
          this.position.push({
            name: item.gene,
            start: item.geneStart,
            end: item.geneEnd
          })
        }
      })
    },
    DistalData(data){
      for (let i = 0; i < data.length; i++) {
        if (!this.gene.includes(data[i].gene)){
          this.gene.push(data[i].gene)
          let x = {
            name:data[i].gene,
            start:data[i].geneStart,
            end:data[i].geneEnd
          }
          this.position.push(x)
        }
      }
    },
    handleSnvListChange(value) {
      this.snvList = value
    }
  },
  setup(){
    const route = useRoute()
    const form = JSON.parse(route.query.form)
    console.log(form)
    const data = reactive({
      showCollapse: ['1','2','3'],
      Distal: {
        column: [
          {name: 'Inter Id',value:'interSampleId',href: true},
          {name: 'Sample',value:'sampleId',href: false},
          {name: 'Chr',value:'chr',href: false},
          {name: 'Anchor1',value:'anchor1Start',href: false},
          {name: 'Anchor2',value:'anchor2Start',href: false},
          {name: 'SNV',value:'snv',href: false},
          {name: 'SNV pos',value:'snvPos',href: false},
          {name: 'CpG pos',value:'cpgPos',href: false},
          {name: 'Gene',value:'gene',href: false},
          {name: 'Start',value:'geneStart',href: false},
          {name: 'End',value:'geneEnd',href: false},
        ]
      },
      Proximal: {
        column: [
          {name: 'Inter Id',value:'interSampleId',href: true},
          {name: 'Sample',value:'sampleId',href: false},
          {name: 'Chr',value:'chr',href: false},
          {name: 'Anchor1',value:'anchor1Start',href: false},
          {name: 'Anchor2',value:'anchor2Start',href: false},
          {name: 'SNV',value:'snv',href: false},
          {name: 'SNV pos',value:'snvPos',href: false},
          {name: 'CpG pos',value:'cpgPos',href: false},
          {name: 'Gene',value:'gene',href: false},
          {name: 'Start',value:'geneStart',href: false},
          {name: 'End',value:'geneEnd',href: false},
        ]
      }
    })

    return {
      ...toRefs(data),
      form,
    }
  }
}
</script>

<style scoped>
::v-deep .el-collapse-item__header{
  height: 56px;
  background-color: #2185d0;
  color: white;
  border-radius: 2px;
  border-bottom: 0;
}
::v-deep .el-collapse-item{
  border-radius: 5px;
  margin-top: 20px;
  border: solid 2px #2185d0;
}
.card-title{
  padding: 10px;
  font-weight: bold;
  font-size: 20px;
}
.card{
  margin-bottom: 10px;
}
.card-body{
  margin-top: 20px
}

</style>
